<template>
	<div class="container" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.6)">
		<div class="head">
			<img :src="book.image" alt="">
			<div class="title">{{book.title}}</div>
			<div class="author">{{book.author}}</div>
		</div>
		<div class="sub-container">
			<div class="headline">短评</div>
			<div class="shadow" v-if="comments.length==0">还没有短评</div>
			<div class="comment-container">
				<vTag v-for="(item,index) of limit(comments,10)" :text="item.content" :key="index" :nums="item.nums" :class="highlight(index)"></vTag>
			</div>
		</div>
		<div class="sub-container">
			<div class="headline">内容简介</div>
			<div class="content" v-html="filter(book.summary)">
			</div>
		</div>
		<div class="sub-container">
			<div class="headline">书本信息</div>
			<div class="detail-container">
				<div class="vertical description">
					<div class="text">出版社</div>
					<div class="text">出版年</div>
					<div class="text">页数</div>
					<div class="text">定价</div>
					<div class="text">装帧</div>
				</div>
				<div class="vertical">
					<div class="text">{{book.publisher}}</div>
					<div class="text">{{book.pubdate}}</div>
					<div class="text">{{book.pages}}</div>
					<div class="text">{{book.price}}</div>
					<div class="text">{{book.binding}}</div>
				</div>
			</div>
		</div>
		<div class="post-container">
			<div class="post-fake" @click="onFakePost">
				<div class="text">输入短评</div>
			</div>
			<div class="like-container">
				<vLike @like="onLike" class="like" :like="likeStatus" :count="likeCount"></vLike>
			</div>
		</div>
		<div class="posting-container" v-if="posting">
			<div class="post-header">
				<div class="text" v-if="comments.length!==0">仅可点击标签+1</div>
				<div class="text" v-else>暂无短评</div>
				<div class="cancel" @click="onCancel">取消</div>
			</div>
			<div class="comment-container">
				<vTag v-for="(item,index) of limit(comments,3)" :text="item.content" :key="index" :nums="item.nums" :class="highlight(index)" @tapping="onPost"></vTag>
			</div>
			<input ref="input" type="text" class="post" placeholder="短评最多12个字" @keyup.enter="onPost" v-focus>
		</div>
		<vMask v-if="posting"></vMask>
	</div>
</template>
<script>
import {BookModel} from '../models/book.js'
let bookModel=new BookModel()
import {LikeModel} from '../models/like.js'
let likeModel=new LikeModel()
import vTag from '../components/tag/tag.vue'
import vLike from '../components/like/like.vue'
import vMask from '../components/mask/mask.vue'
export default{
	name:'book-detail',
	data(){
		return{
			id:this.$route.params.id,
			comments:[],
			book:{},
			likeStatus:false,
			likeCount:0,
			loading:true,
			posting:false
		}
	},
	components:{
		vTag,vLike,vMask
	},
	created(){
		let bid=this.id
		let detail=bookModel.getDetail(bid)
		let comments=bookModel.getComments(bid)
		let likeStatus=bookModel.getLikeStatus(bid)
		Promise.all([detail,comments,likeStatus]).then(res=>{
			this.book=res[0].data
			this.comments=res[1].data.comments
			this.likeStatus=res[2].data.like_status==1?true:false
			this.likeCount=res[2].data.fav_nums
			this.loading=false
		})
	},
	mounted(){
		// let w=document.body.clientWidth
    // 	this.width.width=(w-30)+'px'
    // this.$nextTick(() => {
    //   this.$refs.input.focus()
    // })
	},
	methods:{
		highlight(index){
			if(index==0){
	      return 'ex-tag1'
	    }
	    if(index==1){
	      return 'ex-tag2'
	    }
	    return ''
		},
		filter(text){
			if(!text){
				return
			}
  		var str = text.replace(/\\n/gm,"<br/>&nbsp;&nbsp;&nbsp;&nbsp;")
  		return str
  	},
  	limit(array,length){
  		return array.slice(0,length)
  	},
  	onLike(e){
  		let like_or_cancel=e.behavior
  		likeModel.like(like_or_cancel,this.book.id,400)
  	},
  	onFakePost(){
  		this.posting=true
  	},
  	onCancel(){
  		this.posting=false
  	},
  	onPost(e){//获取用户真正的输入
  		let comment=e.text || this.$refs.input.value
  		if(comment.length==0){
  			this.$message({
          message: '请输入短评内容',
          type: 'warning'
        })
  			return
  		}
  		if(comment.length>12){
  			this.$message({
          message: '短评最多12个字',
          type: 'warning'
        })
  			return
  		}
  		bookModel.postComment(this.book.id,comment).then(res=>{
  			this.$message({
          message: `${comment} +1`,
          type: 'success',
          center: true
        });
        this.comments.unshift({
        	content:comment,
        	nums:1
        })
        this.posting=false
  		})
  	}
  },
  filters:{
  	//vue自带filter过滤，好用
  	//后端返回的原始content，为什么不能解析\n换行？
  },
  directives: {//自定义指令focus 解决Input focus问题
		focus:{
			inserted: function (el) {
				el.focus()
			}
		}
	}
}
</script>
<style lang="stylus" scoped>
.container {background-color: #f5f5f5;width: 100%;height:100%;}
.head {background-color: #fff;padding-top:20px;padding-bottom: 20px;display: flex;flex-direction: column;align-items: center;}
.title {color: #2f2f2f;margin-top: 10px;font-size: 19px;font-weight: 600;}
.author {font-size: 14px;color: #999;margin-top:5px;}
.head img {width: 100px;height: 150px;box-shadow: 2px 2px 3px #e3e3e3;}
.sub-container {/*width: 345px;*/display: flex;flex-direction: column;align-items: center;margin-top: 15px;background-color: #fff;padding: 15px;}
.headline {font-size: 15px;font-weight: 600;color: #2f2f2f;margin-bottom: 10px;}
.comment-container {display: flex;flex-direction: row;flex-wrap: wrap;}
// .comment-container v-tag {margin-right: 8px;margin-bottom: 5px;}
.sub-container .content {text-indent: 29px;font-weight: 500;line-height:22px;}
.num {margin-left: 5px;font-size: 11px;color: #aaa;}
/* .comment-container>v-tag:nth-child(1)>view {background-color: #fffbdd;}
.comment-container>v-tag:nth-child(2)>view {background-color: #eefbff;} */
.ex-tag1 {background-color: #fffbdd !important;}
.ex-tag2 {background-color: #eefbff !important;}
.detail-container {width: 100%;display: flex;flex-direction: row;justify-content: flex-start;margin-bottom: 50px;font-size: 14px;color: #666;}
.vertical {display: flex;flex-direction: column;line-height:22px;}
.description {color: #999;margin-right: 15px;}
.post-container {height: 50px;box-shadow: 1px -1px 1px #e3e3e3;position: fixed;/*width:385px;*/background-color: #fff;bottom: 0;display: flex;flex-direction: row;align-items: center;padding: 0 15px;justify-content: space-between;z-index: 11;width:100%;box-sizing:border-box;}
.post-fake {display: flex;flex-direction: row;align-items: center;height: 30px;width: 230px;border: 1px solid #999;border-radius: 15px;font-size: 11px;padding-left: 10px;}
.like{margin-top: 5px;}
.like-container {display: flex;flex-direction: row;justify-content: space-between;align-items: center;}
.posting-container{bottom: 0;position: fixed;display: flex;flex-direction: column;align-items: center;background-color: #fff;width: 100%;z-index: 999;}
.post-header{width: 100%;border-bottom: 1px solid #f5f5f5;border-top: 1px solid #f5f5f5;height: 50px;display: flex;flex-direction: row;align-items: center;justify-content: space-between;}
.cancel{color: #666;padding: 13px;}
.post-header .text {padding: 13px;}
.post-header>.text:first-child {font-size: 14px;color: #bbb;}
.posting-container .comment-container {padding: 20px 15px 0 15px;}
.post {width: 385px;margin: 15px auto;height: 28px;background-color: #f5f5f5;border-radius: 15px;padding-left: 13px;}
.shadow {color: #999;}
.like-container{display: flex;flex-direction: row;justify-content: space-between;align-items: center;}
.share-btn{margin-top:5px;margin-left:5px;}
.share{width:20px;height:20px;}	
</style>